<template>
    <p>展示富文本编辑器内容：{{ editorData }}</p>
    <div id="MyEditor">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @ready="onReady"></ckeditor>
        <button id="submit">Submit</button>
    </div>
</template>

<script>
    import CKEditor from '@ckeditor/ckeditor5-vue';
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn"
    // import DecoupledEditor from'@ckeditor/ckeditor5-build-decoupled-document';
    // import InlineEditor from '@ckeditor/ckeditor5-build-inline';
    // import BalloonEditor from '@ckeditor/ckeditor5-build-balloon';
    import MyUploadAdapter from './MyUploadAdapter.js';

    export default {
        name: 'MyEditor',
        components: {
            ckeditor: CKEditor.component
        },

        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                    language: "zh-cn",
                    // ckfinder:{
                    //     openerMethod: 'PUT',
                    //     uploadUrl:"http://localhost:8080/company/headline/1/image"
                    // },
                    // autosave:{
                    //     save(editor){
                    //         console.log(editor.getData());
                    //     }
                    // }
                    
                }
            };
        },
        methods: {
            onReady(editor){
                // 设置添加图片动作响应方法  
                editor.plugins.get("FileRepository").createUploadAdapter = loader => {
                    return new MyUploadAdapter(loader);
                }
                // 设置编辑区高度
                editor.editing.view.change( writer => {
                    writer.setStyle( 'height', '200px', editor.editing.view.document.getRoot() );
                });
            }
        }
    }
</script>
